<template>
  <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">Check all</el-checkbox>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange" id="sortBox">
    <div v-for="city in cities" :key="city.id" style="width: 200px">
      <el-checkbox :label="city.id">{{
        city.label
      }}</el-checkbox>
      <el-icon size="16" color="grey" class="move-target">
        <Grid />
      </el-icon>
    </div>
  </el-checkbox-group>
  <el-cascader ref="cascaderRef" class="tagStyle" v-model="selectVal" :options="options" :props="props"
    :show-all-levels="false" @change="cascaderChange">
  </el-cascader>
</template>

<script lang="ts" setup>
import Sortable from 'sortablejs'
import { onMounted, reactive, ref } from 'vue'

const checkAll = ref(false)
const isIndeterminate = ref(true)
// 1、<类型>变量名 (<number[]>val)
// 2、变量名 as 类型 (val as number[])
const checkedCities = ref(<number[]>[])
// const cities = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']
const cities = reactive([{
  label: 'Shanghai',
  id: 1
}, {
  label: 'Beijing',
  id: 2
}, {
  label: 'Guangzhou',
  id: 3
}])

function moveExp() {
  //获取对象
  let el = document.getElementById('sortBox');
  //设置配置
  let ops = {
    animation: 150,
    handle: '.move-target',
    //拖动结束
    onEnd: ({ newIndex, oldIndex }: { newIndex: number, oldIndex: number }) => {
      console.log(oldIndex, newIndex);
      if (newIndex === oldIndex) {
        return false;
      } else {
        //获取拖动后的数组
        const currRow = cities.splice(oldIndex, 1)[0];
        cities.splice(newIndex, 0, currRow)
        console.log(cities);
      }

    },
  };
  //初始化
  Sortable.create(el, ops);
}


const handleCheckAllChange = (val: boolean) => {
  checkedCities.value = val ? cities.map(item => item.id) : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}
onMounted(() => {
  moveExp()
  addHeadStyle()
})

const options: any = [
  {
    value: '1',
    label: 'Guide',
    children: [
      {
        value: 1,
        label: 'Disciplines',
        children: [
          {
            value: 'consistency',
            label: 'Consistency',
            type: 1,
          },
          {
            value: 'feedback',
            label: 'Feedback',
            type: 1,
          },
        ],
      },
      {
        value: 2,
        label: '222',
        children: [
          {
            value: '333',
            label: '333',
            type: 2,
          },
          {
            value: '444',
            label: '444',
            type: 2,
          },
        ],
      },
    ]
  }
]
const selectVal = ref([])
const props = { multiple: true }
const addHeadStyle = () => {
  let lightstyle = document.createElement('style');
  lightstyle.type = 'text/css';
  lightstyle.id = 'head-style-light';
  window.document.head.appendChild(lightstyle);
}
const cascaderRef = ref()
const cascaderChange = () => {
  const nodes = cascaderRef.value.getCheckedNodes().map((item: any) => item.data).filter((item: any) => item.type)
  // 动态给头部加样式
  const el  = document.getElementById('head-style-light') as HTMLElement
  el.innerHTML = nodes?.map((item: any, index: number) => {
    return `.tagStyle .el-tag:nth-child(${index + 1}){color: ${item.type === 1 ? '#fff' : "#000"};background:${item.type === 1 ? 'blue' : 'red'}} `
  }).join('')
}
</script>
